<template>
	<view id="email" class="content">
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<u--form labelPosition="left" :model="email" :rules="rules" ref="uForm">
			<u-form-item label="邮箱" prop="business.email" borderBottom ref="item1">
				<u--input disabled v-model="email.email" border="none"></u--input>
			</u-form-item>
			<u-form-item label="验证码" prop="code" borderBottom ref="item1" labelWidth="50">
				<u--input v-model="email.code" placeholder="请输入验证码" border="none"></u--input>
				<template #right>
					<view class="wrap">
						<u-toast ref="uToast"></u-toast>
						<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
						<u-button style="width: 9.375rem;" :disabled="disabled" type="primary" @tap="getCode">{{ tips }}</u-button>
					</view>
				</template>
			</u-form-item>
		</u--form>
		<u-button type="primary" @click="submit">验证</u-button>
		<!-- 提醒组件 -->
		<u-toast ref="notice"></u-toast>
	</view>
</template>

<script>
export default {
	onShow: function () {
		this.business = uni.getStorageSync('business') ? uni.getStorageSync('business') : {};
		this.email.email = this.business.email
	},
	data() {
		return {
			business: {},
			disabled:false,
			email:{
				code:"",
				email:"",
			},
			tips: '获取验证码',
			seconds: 60,
			rules: {
				'email': {
					type: 'string',
					required: true,
					message: '请填写邮箱',
					trigger: ['blur', 'change']
				},
				'code': {
					type: 'string',
					required: true,
					message: '请填写验证码',
					trigger: ['blur', 'change']
				},
			},
			radio: '',
			switchVal: false
		};
	},
	methods: {
		sexSelect(e) {
			this.model1.userInfo.sex = e.name
			this.$refs.uForm.validateField('userInfo.sex')
		},
		codeChange(text) {
			this.tips = text;
		},
		async getCode() {
			let timer = null
			this.tips = "正在发送中"
			this.disabled = true
			let result = await uni.$u.http.post("/business/emaCode", { busid: this.business.id })
			if (result.code) {
				this.tips = 60
				this.code = result.data
				timer = setInterval(()=>{
					this.tips = this.tips-1
					if(this.tips == 0){
						this.tips = "重新发送验证码";
						this.disabled = false
						clearInterval(timer)
					}
				},1000)
			} else {
				this.$refs.notice({
					type: "error",
					message: result.msg
				})
			}
		},
		end() {
			uni.$u.toast('倒计时结束');
		},
		start() {
			uni.$u.toast('倒计时开始');
		},
		submit(){
			this.$refs.uForm.validate().then(async res => {
				let data = {
					busid:this.business.id,
					code:this.email.code
				}
				let result = await uni.$u.http.post("/business/email",data)
				if(result.code){
					// 验证成功
					this.$refs.notice.show({
						type:"success",
						duration:1000,
						message:result.msg,
						complete:()=>{
							uni.$u.route({
								type:"back"
							})
						}
					})
				}else{
					this.$refs.notice.show({
						type:"error",
						message:result.msg
					})
				}
			}).catch(errors => {
				uni.$u.toast('校验失败')
			})
		}
	},
	onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
		this.$refs.uForm.setRules(this.rules)
	},
};
</script>

<style lang="scss">
.content {
	margin: 0 auto;
	width: 80%;
	overflow-x: hidden;
}

#email .u-form-item__body__right {
	flex-direction: row;
}

.code {
	display: inline-block;
}
</style>